<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-title {
				color: #077DFF;
			}
			
			.fiends-div {
				width: 100%;
				background-color: #FFFFFF;
				border-bottom: 1px solid #F7F7F7;
				padding: 3% 0;
				font-size: 100%;
				display: flex;
				flex-wrap: nowrap;
			}
			
			.fiends-div .friend-heddimg {
				width: 18%;
				margin-right: 5%;
				margin-left: 5%
			}
			
			.fiends-div .agree-button {
				padding: 0;
				position: absolute;
				right: 3%;
				background-color: #077DFF;
				border: 0;
				padding: 0.5% 3%;
				font-size: 95%;
				color: #FFFFFF;
				z-index: 99;
			}
			
			.fiends-div .yagree-div {
				position: absolute;
				right: 5%;
				background-color: #FFFFFF;
				font-size: 80%;
				border-radius: 3px;
				color: #077DFF;
			}
			
			.card-div {
				display: none;
			}
			
			.ul-content {
				padding: 0;
				margin-top: 0;
			}
			
			.ul-content li {
				list-style: none
			}
			
			.conttext-div {
				display: flex;
				flex-wrap: wrap;
				padding: 0;
			}
			
			.conttext-div .div1 {
				display: block;
				width: 90%;
				padding: 0;
				list-style: none;
			}
			
			.div2 {
				color: #A9A9A9;
				font-size: 80%;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" id="backicon"></a>
			<h1 class="mui-title">新的朋友</h1>
		</header>

		<div class="mui-content" id="mui-content">
			<!--列表渲染处-->
			<ul class="ul-content" id="ul-content">

			</ul>

		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/immersed.js"></script>
		<script src="../../js/arttmpl.js"></script>
		<script type="text/javascript">
			mui.init({
				gestureConfig: {
					longtap: true, //默认为false
					hold: true, //默认为false，不监听
					release: true
				}
			});

			window.onload = function() {
				mui.plusReady(function() {
					starbar();
					plus.navigator.setStatusBarStyle('dark');

					//点击返回事件
					var old_back = mui.back;
					mui.back = function() {
						old_back();
						var preView = plus.webview.currentWebview().opener(); //触发上一个页面刷新图片事件
                        mui.fire(preView,'delgoodfriend',{}); 
						plus.navigator.setStatusBarStyle('light');
					}
					
					
					//确认添加好友
					var yagree = document.getElementsByClassName('yagree-div');
					mui("#mui-content").on('tap', ".agree-button", function() {
						var _this = this;
						var cardtext = _this.getElementsByTagName('text')[0].textContent;
						var idtext = _this.getElementsByTagName('text')[1].textContent;
						mui.confirm('确认添加？', function(e) {
							if(e.index == 0) {
								mui.ajax({
									url: 'https://www.lunyuwang.com/friendListController/updateState',
									data: {
										lyfriend_Card: cardtext,
										lyuser_Card: plus.storage.getItem("card"),
										lyaddfri_Id: idtext
									},
									async: true, //将false改为true
									crossDomain: true, //强制使用5+跨域
									dataType: 'json', //服务器返回json格式数据
									type: 'get', //HTTP请求类型
									timeout: 10000, //超时时间设置为10秒；
									//processData: false,
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded'
									},
									success: function(data) {
										
										console.log(data.state);
										if(data.state == 1) {
											_this.style.display = 'none';
											mui.toast('添加成功!')
										} else {
											mui.toast('添加失败!')
										}
									},
									error: function(xhr, type, errorThrown) {
										//异常处理；
										mui.alert("失败了！")
									}
								})

							}

						})
					})
					
					
					//删除无用的列表对象
					mui("#ul-content").on('longtap', ".li-content", function() {
						var _this = this;
						mui.confirm('确认移除？', function(e) {
							if(e.index == 0) {
								mui.ajax({
									url: 'https://www.lunyuwang.com/friendListController/delAddPer',
									data: {										
                                        lyaddfri_Id: _this.getElementsByTagName('text')[1].textContent
									},
									async: true, //将false改为true
									crossDomain: true, //强制使用5+跨域
									dataType: 'json', //服务器返回json格式数据
									type: 'get', //HTTP请求类型
									timeout: 10000, //超时时间设置为10秒；
									//processData: false,
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded'
									},
									success: function(data) {
										console.log(data.state);
										if(data.state == 1) {
											_this.parentNode.removeChild(_this);
											mui.toast('移除成功!')
										} else {
											mui.toast('移除失败!')
										}
									},
									error: function(xhr, type, errorThrown) {
										//异常处理；
										mui.alert("失败了！")
									}
								})

							}

						})

					})
					
					
					//渲染所有列表数据
					mui.ajax({
						url: 'https://www.lunyuwang.com/friendListController/updateStateTo2',
						data: {
							lyuser_Card: plus.storage.getItem("card")
						},
						async: true, //将false改为true
						crossDomain: true, //强制使用5+跨域
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						//processData: false,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: function(data) {
							var reecord = data.newfriendList;
							var record = data.addList;
							var str = template('friends-list', {
								"record": reecord
							});
							var strr = template('friends-list', {
								"record": record
							});
							document.getElementById('ul-content').innerHTML = (str+strr);
							var sum = reecord.length;
							var viewwidth = document.body.clientWidth;
							var headimg = document.getElementsByClassName('fiends-div');
							for(var i = 0; i < headimg.length; i++) {
								headimg[i].getElementsByTagName('img')[0].style.height = "-webkit-calc(" + viewwidth * 0.18 + "px)";
								if(reecord[i]){
									if(reecord[i].lyaddState == 2 || reecord[i].lyaddState == 1) {
										headimg[i].getElementsByTagName('button')[0].style.display = 'none'
									}
								}else{
									headimg[i].getElementsByTagName('img')[0].style.height = "-webkit-calc(" + viewwidth * 0.18 + "px)";
									headimg[i].getElementsByTagName('button')[0].style.display = 'none';
									headimg[i].getElementsByTagName('text')[4].style.display = 'none'
									if(record[i-sum].lyaddState == 2) {
										headimg[i].getElementsByTagName('text')[3].style.display = 'block'
									}else{
										headimg[i].getElementsByTagName('text')[2].style.display = 'block'
									}
								}
							}

						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							mui.alert("失败了！");
						}
					})

				})
			}
		</script>

		<!--列表渲染模板-->
		<script type="text/template" id="friends-list">
			<% for(var i in record){ var item=record[i]; %>
			<li class="li-content">
				<div class="fiends-div">
					<!--<text class="card-div"><%=item.card%></text>-->
					<img src="<%=item.lyuser_FacePath%>" class="friend-heddimg" />
					<div class="conttext-div">
						<div class="div1">
							<%=item.lyuser_NickName%>
						</div>
						<div class="div1 div2">
							<%=item.lyuser_Major%>
						</div>
						<div class="div1 div2">
							<%=item.lyaddrequest_text%>
						</div>
					</div>

					<button class='agree-button'><text class="card-div"><%=item.lyaddrequest_Card%></text><text class="card-div"><%=item.lyaddfri_Id%></text>同意</button>
					<div class="yagree-div"><text class="card-div">等待验证</text><text class="card-div">已通过验证</text><text>已同意</text></div>
				</div>
			</li>
			<% } %>
		</script>
	</body>

</html>